<template>
  <LoginLayout>
    <template #form>
      <p class="mb-4 text-base font-[500] lg:text-2xl lg:font-[600]">{{ $mt('SIGN UP') }}</p>
      <p class="mb-3 text-xs text-[#fff]">
        {{ $mt('Kindly provide a valid email address for account verification.') }}
      </p>
      <div class="mb-4 lg:mx-auto lg:mb-5 lg:w-[80%] lg:py-0.5">
        <van-form ref="formRef">
          <div class="mb-2 rounded-3xl bg-input-color">
            <van-field
              type="email"
              v-model="formData.email"
              name="email"
              :placeholder="$mt('Email Address')"
              :rules="[
                {
                  required: true,
                  message: $mt('Please enter a valid email address'),
                  trigger: 'onSubmit',
                },
                {
                  pattern,
                  message: $mt('Please enter a valid email address'),
                  trigger: 'onSubmit',
                },
              ]">
              <template #left-icon>
                <van-icon name="envelop-o" size="22px" color="#fff" />
              </template>
            </van-field>
          </div>

          <!-- 发送验证码 -->
          <!--          <div class="mb-2 rounded-3xl bg-input-color">-->
          <!--            <van-field-->
          <!--              type="text"-->
          <!--              v-model="formData.code"-->
          <!--              name="code"-->
          <!--              :placeholder="$mt('Verification Code')"-->
          <!--              :rules="[-->
          <!--                {-->
          <!--                  required: true,-->
          <!--                  message: $mt('Please enter the verification code'),-->
          <!--                  trigger: 'onSubmit',-->
          <!--                },-->
          <!--              ]">-->
          <!--              <template #left-icon>-->
          <!--                <van-icon name="setting-o" size="22px" color="#fff" />-->
          <!--              </template>-->
          <!--              <template #button>-->
          <!--                <van-button @click="getCaptcha" size="small" color="#EB414E">-->
          <!--                  {{ isCountingFinished ? $mt('Get Captcha') : `${$mt('wait')} ${count}s ${$mt('resend')}` }}-->
          <!--                </van-button>-->
          <!--              </template>-->
          <!--            </van-field>-->
          <!--          </div>-->

          <div class="mb-2 rounded-3xl bg-input-color">
            <van-field
              type="password"
              v-model="formData.password"
              name="password"
              :placeholder="$mt('Password')"
              :rules="[
                {
                  required: true,
                  message: $mt('Please enter the password'),
                  trigger: 'onSubmit',
                },
                // {
                //   validator,
                //   message: $mt('Please enter a combination of 6-12 digits and letters'),
                //   trigger: 'onSubmit',
                // },
              ]">
              <template #left-icon>
                <van-icon name="more-o" size="22px" color="#fff" />
              </template>
            </van-field>
          </div>
        </van-form>
      </div>
      <button
        name="button"
        @click="handleFormSubmit"
        class="mx-auto flex w-[70%] items-center justify-center rounded-3xl bg-red1 py-2.5">
        <span class="text-xs font-[500]">{{ $mt('SUBMIT') }}</span>
      </button>
    </template>

    <template #info>
      <h4 class="my-2.5 text-sm lg:mb-2.5 lg:mt-[0] lg:text-2xl lg:font-[600]">
        {{ $mt('EASY STEPS TO JOIN BitTopup MEMBERSHIP.') }}
      </h4>
      <div class="mt-2.5 px-5 lg:pb-10">
        <div class="mb-1 flex items-center justify-start lg:mb-2.5" v-for="(item, index) in regInfoList" :key="index">
          <p class="mr-2.5 h-9 w-9 shrink-0 rounded-xl bg-[#1507078a] text-center text-base font-[700] leading-9">
            {{ index + 1 }}
          </p>
          <p class="w-[80%] shrink-0 text-left">{{ item }}</p>
        </div>
      </div>
    </template>
  </LoginLayout>
</template>

<script setup lang="ts">
import { useRequest } from '~/composables/useRequest'
import { pattern, validator } from '~/utils'
import { invoke } from '@vueuse/shared'
import { useCounting } from '~/composables/useLogic'
import { useMemberStore } from '~/store/member'
useSeoMeta({ title: 'BitTopup - Register Center' })
definePageMeta({ layout: 'plain' })
const route = useRoute()
const { $mt, $pushRoute, $forceReplaceRoute } = useCommonPlugin()
const memberStore = useMemberStore()
const { withLoadingToastRef } = useRequestLoading()
const { requestGet, requestPost } = useRequest()
const { count, startCounting, isCountingFinished } = useCounting()
const formRef = ref()
const formData = ref({
  email: '',
  password: '',
  code: '',
})
const regInfoList = ref([
  $mt('Sign up using your email.'),
  $mt('Please click the verification link in your registered email.'),
  $mt('Complete the sign up form.'),
  $mt('You are all set, start enjoy shopping in bittopup.'),
])

// 获取验证码
const getCaptcha = async () => {
  if (!isCountingFinished.value) return
  await formRef.value.validate('email')
  await requestPost('/app/sso/sendEmailCode', {
    email: formData.value.email,
  })
  showToast($mt('Verification code sent successfully'))
  return startCounting()
}
// 表单提交
const handleFormSubmit = async () => {
  await formRef.value.validate()
  const { data } = await requestPost('/app/sso/register', formData.value)
  localStorage.setItem('authToken', data.token)
  await memberStore.updateMemberProfile(data.user)
  showToast($mt('Sign up Successful'))
  await $forceReplaceRoute((route.query.redirectTo ? route.query.redirectTo : '/') as any)
}
withLoadingToastRef()
</script>

<style lang="scss"></style>
